{"ast":null,"code":"var _jsxFileName = \"/data/messenger.client/src/components/Carousel/index.tsx\",\n  _s = $RefreshSig$();\nimport React from 'react';\nimport { FaChevronLeft, FaChevronRight } from 'react-icons/fa';\nimport './Carousel.scss';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nconst Carousel = _ref => {\n  _s();\n  let {\n    children,\n    width,\n    customBackground\n  } = _ref;\n  const [items, setItems] = React.useState([]);\n  const [offset, setOffset] = React.useState(0);\n  const [maxOffset, setMaxOffset] = React.useState(0);\n  const handleSetMaxOffset = React.useCallback(() => {\n    setMaxOffset(-(width * (items.length - 1)));\n  }, [width]);\n  const handleLeftArrowClick = () => {\n    setOffset(currentOffset => {\n      return Math.min(currentOffset + width, 0);\n    });\n  };\n  const handleRightArrowClick = () => {\n    handleSetMaxOffset();\n    setOffset(currentOffset => {\n      return Math.max(currentOffset - width, maxOffset);\n    });\n  };\n  React.useEffect(() => {\n    setOffset(0);\n    setItems(React.Children.map(children, (child, index) => {\n      return /*#__PURE__*/React.cloneElement(child, {\n        style: {\n          height: '100%',\n          minWidth: `${width}px`,\n          maxWidth: `${width}px`,\n          background: index === 0 ? customBackground : ''\n        }\n      });\n    }));\n    handleSetMaxOffset();\n  }, [children, customBackground, handleSetMaxOffset, width]);\n  return /*#__PURE__*/_jsxDEV(\"div\", {\n    className: \"carousel-mainContainer\",\n    children: [offset !== 0 && /*#__PURE__*/_jsxDEV(FaChevronLeft, {\n      className: \"arrow\",\n      onClick: handleLeftArrowClick\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 52,\n      columnNumber: 17\n    }, this) || /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"arrow--disable\"\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 53,\n      columnNumber: 17\n    }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"carousel-mainContainer-window\",\n      children: /*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"all-items-container\",\n        style: {\n          transform: `translateX(${offset}px)`\n        },\n        children: items\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 56,\n        columnNumber: 17\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 55,\n      columnNumber: 13\n    }, this), offset !== -(width * (items.length - 1)) && /*#__PURE__*/_jsxDEV(FaChevronRight, {\n      className: \"arrow\",\n      onClick: handleRightArrowClick\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 65,\n      columnNumber: 17\n    }, this) || /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"arrow--disable\"\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 66,\n      columnNumber: 17\n    }, this)]\n  }, void 0, true, {\n    fileName: _jsxFileName,\n    lineNumber: 50,\n    columnNumber: 9\n  }, this);\n};\n_s(Carousel, \"XmlWGP6uW/JYhNEP+MvF7kt5DLU=\");\n_c = Carousel;\nexport default Carousel;\nvar _c;\n$RefreshReg$(_c, \"Carousel\");","map":{"version":3,"names":["React","FaChevronLeft","FaChevronRight","Carousel","children","width","customBackground","items","setItems","useState","offset","setOffset","maxOffset","setMaxOffset","handleSetMaxOffset","useCallback","length","handleLeftArrowClick","currentOffset","Math","min","handleRightArrowClick","max","useEffect","Children","map","child","index","cloneElement","style","height","minWidth","maxWidth","background","transform"],"sources":["/data/messenger.client/src/components/Carousel/index.tsx"],"sourcesContent":["import React from 'react';\nimport { FaChevronLeft, FaChevronRight } from 'react-icons/fa';\nimport './Carousel.scss';\nconst Carousel = ({children, width, customBackground}: {\n    children: any;\n    width: number;\n    customBackground?: string;\n}) => {\n    const [items, setItems] = React.useState<React.ReactNode[]>([]);\n    const [offset, setOffset] = React.useState<number>(0);\n    const [maxOffset, setMaxOffset] = React.useState<number>(0);\n\n    const handleSetMaxOffset = React.useCallback((): void => {\n        setMaxOffset(\n            -(width * (items.length - 1))\n        );\n    }, [width]);\n\n    const handleLeftArrowClick = () => {\n        setOffset((currentOffset) => {\n            return Math.min(currentOffset + width, 0);\n        });\n    }\n\n    const handleRightArrowClick = () => {\n        handleSetMaxOffset();\n        setOffset((currentOffset) => {\n            return Math.max(currentOffset - width, maxOffset);\n        });\n    }\n\n    React.useEffect(() => {\n        setOffset(0);\n        setItems(\n            React.Children.map(children, (child, index) => {\n                return React.cloneElement(child, {\n                    style: {\n                        height: '100%',\n                        minWidth: `${width}px`,\n                        maxWidth: `${width}px`,\n                        background: (index === 0)? customBackground:''\n                    }\n                });\n            })\n        );\n        handleSetMaxOffset();\n    }, [children, customBackground, handleSetMaxOffset, width]);\n\n    return (\n        <div className=\"carousel-mainContainer\">\n            {(offset !== 0 &&\n                <FaChevronLeft className=\"arrow\" onClick={handleLeftArrowClick}/>) ||\n                <div className='arrow--disable'/>\n            }\n            <div className=\"carousel-mainContainer-window\">\n                <div className=\"all-items-container\"\n                    style={{\n                        transform: `translateX(${offset}px)`\n                    }}\n                >\n                    {items}\n                </div>\n            </div>\n            {(offset !== -(width * (items.length - 1)) &&\n                <FaChevronRight className=\"arrow\" onClick={handleRightArrowClick}/>) ||\n                <div className='arrow--disable'/>\n            }\n        </div>\n    );\n}\n\nexport default Carousel;"],"mappings":"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"},"metadata":{},"sourceType":"module"}